<template>
  <el-card shadow="hover" class="user-card">
    <el-row :gutter="12">
      <!-- 左侧：姓名 + 手机 + 网点 -->
      <el-col :xs="16" :sm="16" :md="16">
        <div class="info-left">
          <div>姓名：{{ name }}</div>
          <div>手机号码：{{ phone }}</div>
          <div>网点名称：{{ branch }}</div>
        </div>
      </el-col>

      <!-- 右侧：订单数量 -->
      <el-col :xs="8" :sm="8" :md="8">
        <div class="info-right">
          订单数量：<span class="count">{{ orderCount }}</span>
        </div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup lang="ts">
interface Props {
  name: string
  phone: string
  orderCount: number | string
  branch: string
}
defineProps<Props>()
</script>

<style scoped>
.user-card {
  margin: 0 auto 5px;
}

.info-left,
.info-right {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 14px;
  line-height: 1.8;
}

.info-right {
  text-align: right;
}
.count {
  font-size: 16px;
  font-weight: bold;
  color: #f56c6c;
}
</style>
